<template>
<div class="pb-20 md:pb-28 container m-auto max-w-screen-md px-4 md:px-0">
    <h2 class="text-38px text-black mb-8 font-bold text-center">為何要選擇<br class="block md:hidden"> COCloud 的 DDoS 服務？</h2>  
    <h3 class="border-l-8 border-orange bg-grayLight p-4 text-2xl font-bold text-black">
        常見問題
    </h3>
    <div v-for="item in questionList">
        <div class="flex items-center shadow-sm rounded p-4 justify-between cursor-pointer" @click="item.show = !item.show">
            <div class="flex items-center">
                <span class="inline-block bg-orangeLight w-2 h-2 mr-4 flex-shrink-0"></span>
                <h4 class="inline-block text-black font-bold">
                    {{ item.title }}
                </h4>
            </div>
            <span class="flex-shrink-0">
                <img class="w-5" v-if="!item.show" src="../assets/images/chevron-down.webp">
                <img class="w-5" v-else src="../assets/images/chevron-up.webp">
            </span>
        </div>
        <div class="bg-grayLight rounded transition-all duration-500 overflow-hidden" :class="item.show?'max-h-screen':'max-h-0'">
            <p class="p-4 text-black">
                {{ item.content }}
            </p>
        </div>
    </div>
</div>
</template>
<script setup>
import { reactive } from 'vue'

const questionList = reactive([
    {
        id: 1,
        title: 'COCloud的DDoS防護有何特色？',
        content: 'COCloud的DDoS防護具有多種防禦機制，包括反向代理、限制流量、攻擊分散等。此外，COCloud的DDoS防護還可應對多種攻擊方式，例如SYN Flood、UDP Flood等。',
        collapsed: true
    },
    {
        id: 2,
        title: 'COCloud的DDoS防護的價格如何？',
        content: 'COCloud的DDoS防護採用按需計費的方式，可根據實際使用情況進行付費，價格相對比較靈活。',
        collapsed: true
    },
    {
        id: 3,
        title: 'COCloud的DDoS防護是否能夠適應不同的網絡環境？',
        content: 'COCloud的DDoS防護能夠適應不同的網絡環境，並且支持多種應用場景，包括Web、游戲、金融等。此外，COCloud的DDoS防護還支持多種協議，包括HTTP、HTTPS、TCP、UDP等。',
        collapsed: true
    },
    {
        id: 4,
        title: 'COCloud的DDoS防護是否能夠提供24小時的技術支持？',
        content: 'COCloud的DDoS防護提供24/7小時的技術支持，可以隨時聯繫專業技術人員進行諮詢和疑難解答，以確保用戶的網絡安全。',
        collapsed: true
    },
    {
        id: 5,
        title: 'COCloud的DDoS防護是否能夠提供全面的報告和監控？',
        content: 'COCloud的DDoS防護能夠提供全面的報告和監控，包括攻擊次數、攻擊流量、攻擊類型等多種信息。此外，COCloud的DDoS防護還能夠提供實時監控和分析，及時發現網絡異常和威脅，以保障用戶的網絡安全。',
        collapsed: true
    },
    {
        id: 6,
        title: 'COCloud的DDoS防護是否能夠保護大規模的攻擊？',
        content: '是的，COCloud的DDoS防護能夠保護大規模的攻擊。COCloud擁有強大的基礎設施和技術支持，能夠應對高達數百Gbps的攻擊流量，並且能夠快速鎖定攻擊源頭，保護用戶網絡的穩定運行。',
        collapsed: true
    },
    {
        id: 7,
        title: 'COCloud的DDoS防護是否會對網絡性能造成影響？',
        content: 'COCloud的DDoS防護對網絡性能的影響非常小，甚至可以忽略不計。COCloud的DDoS防護採用分散式的防禦機制，攻擊流量會在多個節點上進行處理，因此不會對網絡帶寬和服務質量產生顯著的影響。',
        collapsed: true
    }
])

</script>